<template>
  <div>
    <h2>产品月销</h2>
    <div id="chart2" class="chart"></div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  name: "ItemTwo",
  setup() {
    let $echarts = inject("echarts");
    let $axios = inject("axios");

    let data = reactive({});

    async function getData() {
      data = await $axios(`/two/data`);
    }

    onMounted(() => {
      let myEcharts = $echarts.init(document.getElementById("chart2"));
      getData().then(() => {
        myEcharts.setOption({
          tooltip: {
              trigger:"axis",
              axisPointer:{
                  type:'cross',
                  label:{
                      backgroundColor:"#e6b600"
                  }
              }
          },
          legend:{
              data:["服饰","数码","家电","家居","日化"],
                textStyle:{
                    color:"#fff"
                }
          },
           grid: {
            left: "2%",
            right:"6%",
            bottom:"12%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: data.data.data.chartData.day,
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          series: [
            {
              name: "服饰",
              data: data.data.data.chartData.num.Clothes,
              type: "line",
              smooth: true,
              showSymbol: false,
              stack: "Total",
              lineStyle: {
                width: 0
              },
              emphasis: {
                focus: "series"
              },
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(128,255,165)"
                  },
                  {
                    offset: 1,
                    color: "rgb(1,191,236)"
                  }
                ])
              }
            },
            {
              name: "数码",
              data: data.data.data.chartData.num.digit,
              type: "line",
              smooth: true,
              showSymbol: false,
              stack: "Total",
              lineStyle: {
                width: 0
              },
              emphasis: {
                focus: "series"
              },
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(0,221,255)"
                  },
                  {
                    offset: 1,
                    color: "rgb(77,119,255)"
                  }
                ])
              }
            },
            {
              name: "家电",
              data: data.data.data.chartData.num.Electrical,
              type: "line",
              smooth: true,
              showSymbol: false,
              stack: "Total",
              lineStyle: {
                width: 0
              },
              emphasis: {
                focus: "series"
              },
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(55,162,255)"
                  },
                  {
                    offset: 1,
                    color: "rgb(116,21,219)"
                  }
                ])
              }
            },
            {
              name: "家居",
              data: data.data.data.chartData.num.gear,
              type: "line",
              smooth: true,
              showSymbol: false,
              stack: "Total",
              lineStyle: {
                width: 0
              },
              emphasis: {
                focus: "series"
              },
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(255,0,135)"
                  },
                  {
                    offset: 1,
                    color: "rgb(135,0,157)"
                  }
                ])
              }
            },
            {
              name: "日化",
              data: data.data.data.chartData.num.Chemicals,
              type: "line",
              smooth: true,
              showSymbol: false,
              stack: "Total",
              lineStyle: {
                width: 0
              },
              emphasis: {
                focus: "series"
              },
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(255,191,0)"
                  },
                  {
                    offset: 1,
                    color: "rgb(224,62,76)"
                  }
                ])
              }
            }
          ]
        });

        // 让echarts图表自适应
        window.addEventListener("resize", () => {
          myEchart.resize();
        });
      });
    });

    return { getData, data };
  }
};
</script>

<style scoped lang="less">
h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  width: 100%;
  height: 4.5rem;
}
</style>
